<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业微信客户详情查询</title>
    <link rel="stylesheet" href="styles/main.css">
    <!-- 企业微信JSSDK -->
    <script src="https://res.wx.qq.com/open_js/jweixin-1.2.0.js"></script>
</head>
<body>
    <div id="app">
        <!-- 加载状态 -->
        <div id="loading" class="loading-container">
            <div class="loading-spinner"></div>
            <p>正在初始化...</p>
        </div>

        <!-- 主要内容区域 -->
        <div id="main-content" class="main-content" style="display: none;">
            <!-- 头部 -->
            <header class="header">
                <h1>客户详情查询</h1>
                <div class="user-info">
                    <span id="user-name">未登录</span>
                </div>
            </header>

            <!-- 搜索区域 -->
            <section class="search-section">
                <div class="search-container">
                    <div class="search-input-group">
                        <input type="text" id="customer-search" placeholder="请输入客户ID或扫描二维码获取" class="search-input">
                        <button id="scan-btn" class="scan-btn" title="扫描二维码">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M3 3h6v6H3V3zm2 2v2h2V5H5zM3 15h6v6H3v-6zm2 2v2h2v-2H5zM15 3h6v6h-6V3zm2 2v2h2V5h-2zM15 15h2v2h-2v-2zm0 4h2v2h-2v-2zm4-4h2v6h-2v-6zm-8-8h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm4-8h2v2h-2V7zm0 4h2v2h-2v-2z"/>
                            </svg>
                        </button>
                        <button id="search-btn" class="search-btn">查询</button>
                    </div>
                </div>
            </section>

            <!-- 客户详情展示区域 -->
            <section class="customer-detail-section">
                <div id="customer-detail" class="customer-detail" style="display: none;">
                    <!-- 客户基本信息 -->
                    <div class="customer-basic-info">
                        <div class="customer-avatar">
                            <img id="customer-avatar" src="" alt="客户头像" onerror="this.src='images/default-avatar.png'">
                        </div>
                        <div class="customer-info">
                            <h2 id="customer-name">客户姓名</h2>
                            <div class="customer-meta">
                                <span id="customer-type" class="customer-type">微信用户</span>
                                <span id="customer-gender" class="customer-gender">未知</span>
                            </div>
                            <div class="customer-corp" id="customer-corp" style="display: none;">
                                <p><strong>企业：</strong><span id="corp-name"></span></p>
                                <p><strong>职位：</strong><span id="customer-position"></span></p>
                            </div>
                        </div>
                    </div>

                    <!-- 跟进人信息 -->
                    <div class="follow-users-section">
                        <h3>跟进人信息</h3>
                        <div id="follow-users-list" class="follow-users-list">
                            <!-- 跟进人列表将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>

                <!-- 空状态 -->
                <div id="empty-state" class="empty-state">
                    <div class="empty-icon">
                        <svg width="64" height="64" viewBox="0 0 24 24" fill="#ccc">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                        </svg>
                    </div>
                    <p>请输入客户ID或扫描二维码查询客户详情</p>
                </div>

                <!-- 错误状态 -->
                <div id="error-state" class="error-state" style="display: none;">
                    <div class="error-icon">
                        <svg width="64" height="64" viewBox="0 0 24 24" fill="#f56565">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
                        </svg>
                    </div>
                    <p id="error-message">查询失败，请稍后重试</p>
                    <button id="retry-btn" class="retry-btn">重试</button>
                </div>
            </section>
        </div>
    </div>

    <!-- JavaScript文件 -->
    <script src="js/config.js"></script>
    <script src="js/api.js"></script>
    <script src="js/wechat.js"></script>
    <script src="js/main.js"></script>
</body>
</html>